<tabset *ngIf="selection.hasSingleSelection"
        id="tabset-osd-details">
  <tab heading="Devices"
       i18n-heading>
    <cd-device-list *ngIf="osd.loaded && osd.id !== null"
                    [osdId]="osd.id"></cd-device-list>
  </tab>

  <tab heading="Attributes (OSD map)"
       i18n-heading>
    <cd-table-key-value *ngIf="osd.loaded"
                        [data]="osd.details.osd_map">
    </cd-table-key-value>
  </tab>

  <tab heading="Metadata"
       i18n-heading>
    <cd-table-key-value *ngIf="osd.loaded && osd.details.osd_metadata; else noMetaData"
                        (fetchData)="refresh()"
                        [data]="osd.details.osd_metadata">
    </cd-table-key-value>
    <ng-template #noMetaData>
      <cd-alert-panel type="warning"
                      i18n>Metadata not available</cd-alert-panel>
    </ng-template>
  </tab>

  <tab heading="Device health"
       i18n-heading>
    <cd-smart-list [osdId]="osd.id"></cd-smart-list>
  </tab>

  <tab heading="Performance counter"
       i18n-heading>
    <cd-table-performance-counter *ngIf="osd.loaded"
                                  serviceType="osd"
                                  [serviceId]="osd.id">
    </cd-table-performance-counter>
  </tab>

  <tab heading="Histogram"
       i18n-heading>
    <cd-alert-panel *ngIf="osd.loaded && osd.histogram_failed"
                    type="warning"
                    i18n>Histogram not available: {{ osd.histogram_failed }}</cd-alert-panel>

    <div class="row"
         *ngIf="osd.loaded && osd.details.histogram">
      <div class="col-md-6">
        <h4 i18n>Writes</h4>
        <cd-osd-performance-histogram [histogram]="osd.details.histogram.osd.op_w_latency_in_bytes_histogram">
        </cd-osd-performance-histogram>
      </div>
      <div class="col-md-6">
        <h4 i18n>Reads</h4>
        <cd-osd-performance-histogram [histogram]="osd.details.histogram.osd.op_r_latency_out_bytes_histogram">
        </cd-osd-performance-histogram>
      </div>
    </div>
  </tab>

  <tab i18n-heading
       *ngIf="grafanaPermission.read"
       heading="Performance Details">
    <cd-grafana [grafanaPath]="'osd-device-details?var-osd=osd.' + osd['id']"
                uid="CrAHE0iZz"
                grafanaStyle="GrafanaStyles.two">
    </cd-grafana>
  </tab>

</tabset>
